import React from 'react'
import { withRouter } from 'react-router-dom'
import { NavBar } from 'antd-mobile'
import PropTypes from 'prop-types'
import './index.scss'
import styles from './index.module.scss'

function NavHeader ({
  children,
  history,
  onLeftClick,
  rightContent,
  className
}) {
  const defaultHandler = () => history.go(-1)
  return (
    <div>
      {/* 顶部导航栏 */}
      <NavBar
        className={[styles.navbar, className && className].join(' ')}
        mode='light'
        icon={<i className='iconfont icon-back' />}
        onLeftClick={onLeftClick || defaultHandler}
        rightContent={rightContent}
      >
        {children}
      </NavBar>
    </div>
  )
}
NavHeader.propTypes = {
  children: PropTypes.string.isRequired,
  onLeftClick: PropTypes.func
}

export default withRouter(NavHeader)
